<template>
<!--  todo 待修改-->
  <view class="container">
    <!-- 1. 单位选择区 -->
    <view class="unit-selector">
      <text class="section-title">选择单位</text>
      <view class="unit-list">
        <view v-for="(unit, index) in units" :key="index" class="unit-card" @click="selectUnit(index)">
          <text class="unit-name">{{ unit.name }}</text>
        </view>
      </view>
    </view>

    <!-- 2. 整体统计信息区 -->
    <view class="overall-statistics">
      <text class="section-title">整体统计信息</text>
      <view class="stat-card">
        <text class="stat-item">单位总数：{{ totalUnits }}</text>
        <text class="stat-item">地址总数：{{ totalAddresses }}</text>
        <text class="stat-item">总巡检次数：{{ totalInspections }}</text>
      </view>
    </view>

    <!-- 3. 单位详情统计区 -->
    <view  class="unit-details">
      <text class="section-title">单位详情 - {{ selectedUnit.name }}</text>
      <!-- 每个地址信息 -->
      <view
        v-for="(address, index) in selectedUnit.addresses"
        :key="index"
        :class="['address-card', { 'selected-card': selectedAddressIndex === index }]"
        @click="selectAddress(index)"
      >
        <text class="address-name">{{ address.name }}</text>
        <view class="address-statistics">
          <text>今日巡检：{{ address.todayCount }} 次</text>
          <text>本月累计：{{ address.monthCount }} 次</text>
        </view>
        <!-- 巡检趋势图表 -->
        <view class="address-chart">
          <u-charts id="address-chart-{{ index }}" canvas-id="chart{{ index }}" :opts="getChartOpts(address)" />
        </view>
		<!-- 周趋势图 -->
		<view class="address-chart">
		  <u-charts id="weekly-chart" canvas-id="weeklyChart" :opts="weeklyChartOpts" />
		</view>
      </view>
    </view>
  </view>
</template>



<script>
export default {
  data() {
    return {
      // 示例数据
      units: [
        {
          name: "单位A",
          addresses: [
            { name: "地址A1", todayCount: [20, 30, 40, 50], monthCount: [100, 200, 150] },
            { name: "地址A2", todayCount: [10, 20, 15, 25], monthCount: [80, 120, 140] },
          ],
        },
        {
          name: "单位B",
          addresses: [
            { name: "地址B1", todayCount: [15, 25, 35, 45], monthCount: [90, 110, 130] },
          ],
        },
      ],
      selectedUnitIndex: null, // 当前选中的单位
      selectedAddressIndex: null, // 当前选中的地址
      todayChartOpts: {}, // 今日巡检图表配置
      monthChartOpts: {}, // 本月巡检图表配置
    };
  },
  watch: {
    selectedAddress: {
      immediate: true,
      handler() {
        if (this.selectedAddress) {
          this.initCharts();
        }
      },
    },
  },
  computed: {
    selectedAddress() {
      if (this.selectedUnitIndex !== null && this.selectedAddressIndex !== null) {
        return this.units[this.selectedUnitIndex].addresses[this.selectedAddressIndex];
      }
      return null;
    },
  },
  methods: {
    selectUnit(index) {
      this.selectedUnitIndex = index;
      this.selectedAddressIndex = null; // 清除地址选择
    },
    selectAddress(index) {
      this.selectedAddressIndex = index;
      this.initCharts();
    },
    initCharts() {
      if (this.selectedAddress) {
        this.initTodayChart();
        this.initMonthChart();
      }
    },
    initTodayChart() {
      const data = this.selectedAddress.todayCount;
      this.todayChartOpts = {
        type: "column",
        categories: ["上午", "中午", "下午", "晚上"],
        series: [{ name: "巡检次数", data }],
        xAxis: { disableGrid: true },
        yAxis: { title: "次数", min: 0 },
        extra: { column: { width: 30 } },
        width: 750,
        height: 400,
      };
    },
	initWeeklyChart() {
	  const data = this.selectedAddress.weeklyCount || [5, 10, 15, 20, 25, 30, 35];
	  this.weeklyChartOpts = {
		type: "line",
		categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
		series: [{ name: "巡检次数", data }],
		xAxis: { disableGrid: true },
		yAxis: { title: "次数", min: 0 },
		extra: { line: { smooth: true } },
		width: 750,
		height: 400,
	  };
	},
    initMonthChart() {
      const data = this.selectedAddress.monthCount;
      this.monthChartOpts = {
        type: "line",
        categories: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
        series: [{ name: "巡检次数", data }],
        xAxis: { disableGrid: true },
        yAxis: { title: "次数", min: 0 },
        extra: { line: { smooth: true } },
        width: 750,
        height: 400,
      };
    },
  },
};
</script>


<style>
.container {
  padding: 20rpx;
  height: 100%;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 20rpx 0;
}

/* 1. 单位选择区 */
.unit-selector {
  margin-bottom: 30rpx;
}

.selected-card {
  border: 2rpx solid #007aff;
}

.unit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.unit-card {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  flex: 1;
}

.unit-name {
  font-size: 28rpx;
  color: #007aff;
}

/* 2. 整体统计信息区 */
.overall-statistics {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.stat-card {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  font-size: 28rpx;
  color: #333;
}

/* 3. 单位详情统计区 */
.unit-details {
  margin-top: 30rpx;
}

.address-card {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.address-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 10rpx;
}

.address-statistics {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.address-chart {
  margin-top: 10rpx;
}
</style>
